//招标预告详情
<template>
  <div class="main">
    <div class="div-item">
      <div class="head">{{ pageData.ForenoticeTitle}}</div>
      <div class="div-date">发布日期:&nbsp;{{pageData.PublishTime|formatDate}}</div>
    </div>
    <div class="div-item">
      <div class="div-name">
        <span></span>截止日期
      </div>
      <div :class="pageData.DateClass">
        <div class="div-left">{{ pageData.BmEndDate | formatDate('YYYY-MM-DD')}}</div>
        <div class="div-right">{{ pageData.DateText}}</div>
        <div style="clear:both"></div>
      </div>
    </div>
    <div class="div-item">
      <div class="div-name">
        <span></span>项目信息
      </div>
      <div class="content">{{ pageData.YGText}}</div>
    </div>
    <div class="div-item">
      <div class="div-name">
        <span></span>招标范围
      </div>
      <div class="content">{{ pageData.ZBFWText}}</div>
    </div>
    <div class="div-item">
      <div class="div-name">
        <span></span>入围条件
      </div>
      <div class="content">{{ pageData.RWTJText}}</div>
    </div>
    <div class="div-item">
      <div class="div-name">
        <span></span>招标负责人
      </div>
      <div class="content">
        <div>负责人:&nbsp;{{ pageData.ContactMan}}</div>
        <div>联系电话:&nbsp;{{ pageData.MobilePhone}}</div>
        <div>电子邮箱:&nbsp;{{ pageData.Email}}</div>
      </div>
    </div>
    <div class="div-item">
      <div class="div-name">
        <span></span>相关文档
      </div>
      <div class="content">
        <div v-show="isDocument"
             v-for="(item,index) in documents"
             class="div-word"
             @click="displayFile(item.Url)"
             :key="index">
          <img :src="require('../../assets/img/'+item.icon)"
               class="img-word">
          <span class="span-word">{{item.DocName}}</span>
        </div>
        <div v-show="!isDocument">暂无文档</div>
      </div>
    </div>
  
    <div class="bottom-placeholder"></div>
    <div class="div-bottom"
         v-show="isInvited">
      <!--<a class="button"
                                                 @click="reject">
                                                <span class="span-icon-reject"></span>拒绝邀请</a>-->
      <a class="button button-red"
         @click="agree">
        <span class="span-icon-agree"></span>接受并报名</a>
    </div>
  </div>
</template>

<script>
import { dateFormat, XButton } from 'vux'
import { BidForenoticeInvitedService } from '../../service/Services.js'
import Utils from '../../utils/utils.js'

export default {
  name: 'Invit',
  components: {
    XButton
  },
  data () {
    return {
      pageData: {},
      documents: [],
      isInvited: false,
      isDocument: true
    }
  },
  methods: {
    loadData () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      let providerGUID = this.$store.getters.getUserInfo.ProviderGUID
      BidForenoticeInvitedService.getBidForenoticeInvitedDetail(this.$route.query.InviteBidForenoticeGUID, providerGUID).then((res) => {
        this.$vux.loading.hide()
        this.pageData = res.Data[0]
        if (res.Documents.length === 0) {
          this.isDocument = false
        } else {
          Utils.fmtDocument(res.Documents)
        }
        this.documents = res.Documents
        if (this.$route.query.BmState === '已截止') {
          this.pageData.DateClass = 'content'
          this.pageData.DateText = this.$route.query.BmState
        } else {
          this.pageData.DateClass = 'content red-color'
          let day = Utils.getDateDiff(this.formatDate(this.pageData.BmEndDate), Utils.dateFormat(new Date(), 'yyyy-MM-dd'))
          this.pageData.DateText = '仅剩' + day + '天'
        }
        if (this.pageData.BmState === '未报名' && this.pageData.bm === 'false') {
          this.isInvited = true
        }
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    formatDate (myDate) {
      var msec = myDate.match(/\d+[+]\d+/gi)
      return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD')
    },
    // reject () {
    //   this.$vux.toast.show({
    //     text: '拒绝成功'
    //   })
    // },
    agree () {
      let providerGUID = this.$store.getters.getUserInfo.ProviderGUID
      var receiverInviteData = {
        ProviderGUID: providerGUID,
        InviteBidForenoticeGUID: this.$route.query.InviteBidForenoticeGUID,
        CgPlanGUID: this.pageData.CgPlanGUID
      }
      this.$vux.loading.show({
        text: '处理中...'
      })
      BidForenoticeInvitedService.receiverInvite(receiverInviteData).then((res) => {
        this.$vux.loading.hide()
        this.$router.push({ path: '/demos/invite-success', query: { title: this.pageData.ForenoticeTitle } })
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    displayFile (url) {
      this.$router.push({ path: '/demos/display-file', query: { docUrl: url } })
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style scoped lang='less'>
.main {
  word-wrap: break-word;
  font-family: PingFangSC-Regular;
}

.head {
  padding-top: 20px;
  font-weight: bold;
  margin: 5px 20px;
  font-size: 19px;
  color: #111111;
}

.content {
  margin: 10px 20px 10px 20px;
  font-size: 14px;
  color: #7F7F7F;
  letter-spacing: 0;
  line-height: 30px;
  border-top: 1px solid #E5E5E5;
  padding-top: 10px;
  padding-bottom: 10px;
}

.div-date {
  margin-left: 20px;
  font-size: 14px;
  color: #7F7F7F;
  padding-bottom: 10px;
}

.div-name {
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
}

.div-name span {
  display: inline-block;
  height: 25px;
  width: 4px;
  background: #DC220B;
  position: relative;
  top: 6px;
  margin-right: 10px;
}

.div-item {
  margin-bottom: 10px;
  background: white;
}

.div-left {
  float: left;
}

.div-right {
  float: right;
}

.button {
  color: #686868;
  background-color: white;
  font-size: 17px;
  height: 50px;
  line-height: 50px; // padding: 0 12px;
  display: inline-block;
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.button-red {
  color: white;
  background-color: red;
}

.bottom-placeholder {
  height: 50px;
}

.div-bottom {
  box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.05);
  border-top: 1px solid #e5e3e6;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}

.red-color {
  color: red;
}

.img-word {
  height: 40px;
  width: 38px;
}

.span-word {
  margin-left: 10px;
  position: relative;
  bottom: 14px;
}

.div-word {
  margin-bottom: 10px;
}
</style>
